<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>生成图像</title>
</head>
<body>

    <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
        您的浏览器尚不支持canvas
    </canvas>

    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")

        window.onload = function(){

            canvas.width = 800
            canvas.height = 800

            var imageData = context.createImageData( canvas.width , canvas.height )
            var pixelData = imageData.data

            for( var i = 0 ; i < canvas.height ; i ++ )
                for( var j = 0 ; j < canvas.width ; j ++ ){

                    var p = i*canvas.width+j

                    pixelData[4*p+0] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2),2)*255)
                    pixelData[4*p+1] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2-2*Math.acos(-1)/3),2)*255)
                    pixelData[4*p+2] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2+2*Math.acos(-1)/3),2)*255)
                    pixelData[4*p+3] = 255
                }

            context.putImageData( imageData , 0 , 0 , 0 , 0 , canvas.width , canvas.height )
        }
    </script>
</body>
</html>